<template>
  <div class="clearfix bg_write">
    <el-col :span="24" class="content_title">
      <el-col :span="12">
        <HeadTitle></HeadTitle>
      </el-col>
      <el-col :span="12"></el-col>
    </el-col>
    <el-col :span="24" class="pd_20" style="display:flex">
      <div id="diy-phone">
        <div class="diy-phone-header">
          <i class="diy-phone-receiver"></i>
          <div class="diy-phone-title j-pagetitle"></div>
        </div>
        <div class="diy-phone-contain" id="j-materialPrev">
          <dl class="materialPrePanel mgt20">
            <dt v-if="form.content && form.types == 0">
              <div class="single-summary pd10" v-html="form.content"></div>
            </dt>
            <dt v-if="form.types == 1 && danxuan" class="tl">
              <h1 class="single-title first-t">{{ danxuan.title }}</h1>
              <p class="single-datetime first-d">
                {{ danxuan.update_time | getTimeFormat }}
              </p>
              <div class="cover-wrap">
                <img :src="danxuan.piclink" />
              </div>
              <p class="single-summary first-p">{{ danxuan.content }}</p>
              <a
                href="yuyu"
                target="_blank"
                class="single-link clearfix first-a"
              >
                <span class="f_l">阅读全文</span>
                <span class="f_r symbol">&gt;</span>
              </a>
            </dt>
          </dl>
          <dl
            class="materialPrePanel mgt20 bgcfff border"
            v-if="form.types == 2"
          >
            <dt class="mb10 mt10" v-if="zhuTitle">
              <a href="awdfr" target="_blank">
                <div class="cover-wrap">
                  <img :src="'/api/' + zhuTitle.piclink" class="img-cover" />
                </div>
                <h2 class="w262">{{ zhuTitle.title }}</h2>
              </a>
            </dt>
            <dd
              class="newWidth"
              v-show="fuTitle"
              :key="i"
              v-for="(item, i) in fuTitle"
            >
              <a class="border-top_1 p" href target="_blank">
                <h3>{{ item.title }}</h3>
                <div class="pic">
                  <img :src="'/api/' + item.piclink" class="img-cover" />
                </div>
              </a>
            </dd>
          </dl>
          <img
            v-if="form.types == 3 && imgUrl"
            :src="$fnc.getImgUrl(imgUrl)"
            alt
          />
        </div>
        <i class="diy-phone-footer"></i>
      </div>
      <div
        class="relative f_l floatBox-width"
        style="margin-top: 40px;margin-left: 25px;position: relative;"
      >
        <el-form
          :label-position="labelPosition"
          :rules="formYZ"
          ref="data"
          class="tl form_mar"
          label-width="80px"
          :model="form"
        >
          <el-form-item label="关键词" prop="keyword" class="hongxing">
            <el-input v-model="form.keyword"></el-input>
            <span class="lh2 size_12 sizeColor mar_lf_15"
              >多个关键词可以使用英文逗号“,”分隔，拒绝中文逗号“，”喔！任意匹配项请将关键词设为"*"。</span
            >
          </el-form-item>
          <el-form-item label="匹配类型" class="hongxing">
            <el-radio-group v-model="form.is_like" style="display:block">
              <el-radio label="0">精确匹配</el-radio>
              <el-radio label="1">模糊匹配</el-radio>
            </el-radio-group>
            <span class="lh2 size_12 sizeColor mar_lf_15"
              >全匹配是对话完全一致才能触发，模糊匹配是包含就触发，两种匹配均区分大小写</span
            >
          </el-form-item>
          <el-form-item label="类型" class="hongxing">
            <div class="formitems">
              <div class="form-controls">
                <div class="radio-group ptrd_box">
                  <label>
                    <input
                      type="radio"
                      v-model="form.types"
                      class="j-sendType"
                      value="0"
                      checked
                    />
                    <span>
                      <i
                        class="pt_ico wenb"
                        :class="{ wenb_act: form.types == 0 }"
                      ></i>
                      <br />文本内容
                    </span>
                  </label>
                  <label>
                    <input
                      type="radio"
                      v-model="form.types"
                      @click="showDioTable"
                      class="j-sendType"
                      value="1"
                    />
                    <span>
                      <i
                        class="pt_ico onewenb"
                        :class="{ onewenb_act: form.types == 1 }"
                      ></i>
                      <br />单条图文
                    </span>
                  </label>
                  <!-- <label><input type="radio" v-model="form.types" @click="showDioTable" class="j-sendType"  value="2"><span><i class="pt_ico morewenb" :class="{morewenb_act:form.types==2}"></i><br>多条图文</span></label>
                                    <label><input type="radio" v-model="form.types" class="j-sendType"  value="3">
                                        <span class="uploadImgClass">
                                            
                                            <i class="pt_ico picwenb" :class="{picwenb_act:form.types==3}">
                                            </i><br>

                                           
                                         <compressimgUpload class="uploadImg_text" listType="text" :isCropper="false" :wx="true" :onSuccess="onSuccess" :isOneImg="true" :files="fileList"></compressimgUpload>
                                        </span>
                  </label>-->
                </div>
                <span class="fi-help-text"></span>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-show="form.types == 0">
            <el-col :span="24" style="display:flex;flex-wrap:no-wrap">
              <editor
                :config="config"
                class="editor_wx"
                style=" width: 100%;"
                v-model="form.content"
                upload-url="/api/common/upload/index/"
                fileName="file"
              />
              <ul id="message-addon" class="from_label">
                <li
                  style="display:inline-block"
                  class="j-msgAddon-txt"
                  @click="addContent('{换行符}')"
                  :key="i"
                >
                  {换行符}
                </li>
              </ul>
              <!-- <ueditor :server-url="UEditorUrl" v-model="form.content" :z-index='21' ueditor-path='/ueditor/' :initial-frame-height='420' :auto-height-enabled='false' :options='config1'></ueditor> -->
            </el-col>
          </el-form-item>
          <el-form-item v-show="form.types == 1 || form.types == 2">
            <el-col :span="24">
              <el-dialog
                :close-on-click-modal="false"
                :title="form.types == 1 ? '选择单条图文' : '选择多条图文'"
                top="2vh"
                width="800px"
                :visible.sync="dialogTableVisible"
              >
                <el-table
                  ref="multipleTable"
                  :data="onewenbData"
                  max-height="450"
                  tooltip-effect="dark"
                >
                  <el-table-column label="标题" min-width="300">
                    <template slot-scope="scope">
                      <div class="ng ng_single">
                        <div class="ng_item">
                          <div class="td_cont with_label">
                            <span class="label label-success">图文</span>
                            <div class="text">
                              <a
                                href="yuyu"
                                target="_blank"
                                class="part new_window"
                                :title="scope.row.title"
                                >{{ scope.row.title }}</a
                              >
                            </div>
                          </div>
                        </div>
                        <div class="ng_item view_more">
                          <a href="yuyu" class="td_cont clearfix new_window">
                            <span class="pull-left">阅读全文</span>
                            <span class="pull-right">&gt;</span>
                          </a>
                        </div>
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column label="创建时间" min-width="160">
                    <template slot-scope="scope">{{
                      scope.row.update_time | getTimeFormat
                    }}</template>
                  </el-table-column>

                  <el-table-column min-width="250">
                    <template slot="header" slot-scope="scope">
                      <span v-if="false">{{ scope.row }}</span>
                      <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"
                      />
                    </template>
                    <template slot-scope="scope">
                      <el-button
                        :loading="$store.state.isLoading"
                        size="mini"
                        v-if="form.types == 1"
                        :type="danxuan.id == scope.row.id ? 'success' : ''"
                        @click="subItem(scope.row)"
                        >选择</el-button
                      >
                      <el-button
                        :loading="$store.state.isLoading"
                        size="mini"
                        :type="scope.row.id == zhuId ? 'success' : ''"
                        v-if="form.types == 2"
                        @click="setZhu(scope.row)"
                        >选择主标题</el-button
                      >
                      <el-button
                        :loading="$store.state.isLoading"
                        size="mini"
                        :type="fuId.indexOf(scope.row.id) >= 0 ? 'success' : ''"
                        v-if="form.types == 2"
                        @click="setFu(scope.row)"
                        >选择副标题</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <div class="tr mar_top_20">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="all_num"
                  >
                  </el-pagination>
                </div>
              </el-dialog>
            </el-col>
          </el-form-item>
          <el-form-item v-show="form.types == 3">
            <el-col :span="24"></el-col>
          </el-form-item>
        </el-form>
        <!-- 小箭头 -->
        <i class="arrow arrow_out top150"></i>
      </div>
    </el-col>
    <el-col :span="22" class="men_add">
      <el-card shadow="always">
        <el-button
          :loading="$store.state.isLoading"
          @click="submitForm"
          @keydown.13="submitForm"
          >确 定</el-button
        >
      </el-card>
    </el-col>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
// import ueditor from '@/components/ueditor/Ueditor.vue';
import editor from "@/components/currency/editor.vue";
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
export default {
  components: {
    HeadTitle,
    editor,
    compressimgUpload
  },
  data() {
    return {
      config: {
        qllink: true
      },
      labelPosition: "top",
      form: {
        keyword: "",
        types: "0",
        is_like: "0",
        content: "",
        material: ""
      },
      config1: {
        initialFrameWidth: "100%:",
        initialFrameHeight: 115,
        wordCount: false,
        initialContent: "",
        toolbars: [["removeformat", "link", "unlink"]]
      },
      UEditorUrl: "",
      formYZ: {},
      dialogTableVisible: false,
      onewenbData: [],
      danxuan: "",
      zhuTitle: "",
      fuTitle: [],
      imgUrl: "",
      search: "",
      zhuId: "",
      fuId: [],
      pageSize: 10,
      currentPage: 1,
      all_num: 0,
      fileList: []
    };
  },
  methods: {
    addContent(item) {
      var str = this.form.content;
      // str=str.replace(/<p>|<\/p>/g, "");
      this.form.content = str + item;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    submitForm() {
      if (this.form.keyword == "") {
        this.$message.error("关键词不能为空！");
        return false;
      } else if (this.form.content == "" && this.form.types == 0) {
        this.$message.error("内容不能为空");
        return false;
      } else if (this.form.material == "" && this.form.types == 1) {
        this.$message.error("单条不能为空");
        return false;
      } else if (this.form.types == 2) {
        if (this.zhuId && this.fuId.length > 0) {
          this.form.material = this.zhuId + "@" + this.fuId.join("@");
        } else {
          this.$message.error("图文不能为空");
          return false;
        }
      } else if (this.form.types == 3 && this.form.material == "") {
        this.$message.error("未选择图片");
        return false;
      }
      var params = {};
      params = this.form;
      if (params.id) {
        this.$api.getWechat.updateWxText(params).then(res => {
          if (res.data.code == 200 && res.data.result) {
            this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      } else {
        this.$api.getWechat.addWxText(params).then(res => {
          if (res.data.code == 200 && res.data.result) {
            this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      }
    },
    subItem(item) {
      console.log(item);
      this.danxuan = item;
      this.dialogTableVisible = false;
      this.form.material = item.id;
    },
    setZhu(item) {
      if (this.fuId.indexOf(item.id) >= 0) {
        this.$fnc.alertError("选择错误", "主图文不能与副图文一样");
        return false;
      }
      this.zhuTitle = item;
      this.zhuId = item.id;
    },
    setFu(item) {
      if (this.fuId.indexOf(item.id) >= 0) {
        this.fuId.splice(this.fuId.indexOf(item.id), 1);
        this.fuTitle.splice(this.fuId.indexOf(item.id), 1);
        return false;
      }
      if (this.fuTitle.length <= 8) {
        this.fuTitle.push(item);
        this.fuId.push(item.id);
      } else {
        this.$message.error("最对只能有8个副标题");
        return false;
      }
    },
    showDioTable() {
      this.dialogTableVisible = true;
    },
    onSuccess(pic) {
      this.form.material = pic;
      this.imgUrl = pic;
    },
    getUpdateWxTextRow() {
      if (this.$store.state.updateWxText) {
        var row = this.$store.state.updateWxText;
        this.form = row;
        this.danxuan = row.material_ar || {
          title: "",
          content: "",
          piclink: "",
          links: ""
        };
        console.log(row);
        if (row.types == 1) {
        } else if (row.types == 3) {
          this.imgUrl = row.material;
        }
      }
    },
    handleSizeChange(val) {
      this.$store.dispatch("getWx_material", {
        title: "",
        page: "",
        page_size: val
      });
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.$store.dispatch("getWx_material", {
        title: "",
        page: val,
        page_size: this.pageSize
      });
    }
  },
  created() {
    this.UEditorUrl = "";
    this.getUpdateWxTextRow();
  },
  computed: {
    getSuai() {
      return this.$store.state.wx_material;
    }
  },
  watch: {
    form: {
      handler(val) {
        if (val.types == 0) {
          this.form.material = "";
          this.imgUrl = "";
          this.zhuId = "";
          this.fuId = [];
          this.zhuTitle = "";
          this.fuTitle = "";
          this.danxuan = "";
        } else if (val.types == 1 || val.types == 2 || val.types == 3) {
          this.form.content = "";
        }
      },
      deep: true
    },
    getSuai(obj) {
      this.onewenbData = obj.data;
      this.all_num = obj.all_num;
    },
    dialogTableVisible(val) {
      // if(this.$store.state.wx_material==''){
      this.$store.dispatch("getWx_material", {
        title: "",
        page: 1,
        page_size: 10
      });
      // };
      this.onewenbData = this.$store.state.wx_material.data;
      this.all_num = this.$store.state.wx_material.all_num;
    },
    fuId(val) {
      for (var i in val) {
        if (this.zhuId == val[i]) {
          this.fuId.splice(i, 1);
          this.fuTitle.splice(i, 1);
          this.$fnc.alertError("选择错误", "主图文不能与副图文一样");
        }
      }
    },
    search(val) {
      this.$store.dispatch("getWx_material", {
        title: val,
        page: "",
        page_size: ""
      });
    },
    $route: "getUpdateWxTextRow"
  },
  mounted() {}
};
</script>

<style lang="less" scope>
#message-addon {
  width: 150px;

  background: #fff;
  height: 100%;
  margin-left: 10px;
  z-index: 1;
  // top: 0;
  // left: 705px;
  // position: absolute;
}
#message-addon > li {
  width: 100%;
}
</style>
